<template>
	<view class="wp">
		<text class="iconfont icon-jiahao" @click="close"></text>
		<swiper class="swiper" :interval="3000" :duration="1000" circular>
			<swiper-item class="swiper-item" v-for="(item,index) in imageList" :key="index"
				@longtap="saveImage('http://i.jiujiubaopin.com/images/0/2020/11/dY0MNM6I3B2YyLyty003FgW622T0iW.jpg')">
				<image src="/static/login_button.png" mode="widthFix"></image>
				<text class="describe">餐厅上几个</text>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'preview-image',
		props:{
			imageList:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {

			}
		},
		methods: {
			close() {
				this.$emit('update:isPrevImage', false);
			},
			saveImage(e) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '保存图片',
					success(res) {
						if (res.confirm) {
							uni.downloadFile({
								url: e,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											that.$api.msg('保存成功！')
										}
									});
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('/store/icon.css');

	.wp {
		position: fixed;
		background: rgba(0, 0, 0, 0.8);
		top: 0;
		height: 100%;
		width: 100%;
		z-index: 500;

		.icon-jiahao {
			color: #fff;
			font-size: 65upx;
			transform: rotateZ(45deg);
			position: absolute;
			top: 20upx;
			right: 20upx;
			z-index: 100;
		}

		.swiper {
			height: 100%;
			width: 100%;

			.swiper-item {
				position: relative;

				image {
					height: 0;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					width: 100%;
					will-change: transform;
				}

				.describe {
					background: #000;
					border-radius: 10upx;
					color: #fff;
					padding: 4upx 20upx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 100upx;
					z-index: 100;
				}
			}
		}
	}
</style>